<template>
    <div class="logging-body">
      <div class="logging">
        <div class="logging-text">
          <p>加载中...</p>
          <p>加载中...</p>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "logging"
    }
</script>

<style scoped lang="scss">

  .logging-body{
    display: none;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
    background: rgba(0,175,239,1);
    position: fixed;
    .logging{
      position: absolute;
      left: 50%;
      top: 50%;
      width: 200px;
      height: 200px;
      margin: -100px auto auto -100px;
      background: url("../../../static/img/logging02.gif") center;
      background-size: 100% 100%;
      .logging-text{
        position: absolute;
        left: 0;
        bottom: 0;
        color: #fff;
        font-size: 12px;
        width: 100%;
        height: 30px;
        @keyframes fontShow {
          from{
            opacity: 1;
            transform:scale(1);
            letter-spacing: 2px;
          }
          to{
            opacity: 0;
            transform:scale(2);
            letter-spacing: 4px;
          }
        }
        p{
          position: absolute;
          text-align: center;
          width: 100%;
          left: 0;
          bottom: 0;
          letter-spacing: 2px;
          &:last-child{
            animation: fontShow 1.8s 1s infinite;
          }
        }
      }
    }
  }
</style>
